// src/styles/commonStyles.js

export const commonStyles = {
  // 容器样式
  sectionContainer: {
    marginTop: "40px",
    display: "flex",
    justifyContent: "space-between",
    width: "100%",
    maxWidth: "1300px"
  },

  // 居中容器样式
  centeredSectionContainer: {
    marginTop: "40px",
    display: "flex",
    justifyContent: "center",
    width: "100%",
  },

  // 图表容器样式
  chartContainer: {
    width: "600px",
    height: "650px"
  },

  // 标题样式
  titleStyle: {
    textAlign: "center",
    marginBottom: "20px",
    height: "30px",
    color: "#333"
  },

  // 图表包装器样式
  chartWrapper: {
    width: "600px",
    height: "600px"
  },

  // 图片样式
  imageStyle: {
    width: "600px",
    height: "600px",
    display: "block"
  },

  // Before/After图表容器样式
  beforeAfterContainer: (darkMode) => ({
    width: "800px", 
    height: "500px",
    backgroundColor: darkMode ? '#333' : '#fff',
    padding: "20px",
    borderRadius: "8px",
    boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
  }),

  // Before/After图表包装器样式
  beforeAfterWrapper: (darkMode) => ({
    width: "100%", 
    height: "calc(100% - 50px)",
    backgroundColor: darkMode ? '#333' : '#fff'
  }),

  // Before/After分组标题样式
  beforeAfterGroupTitle: (darkMode) => ({
    position: 'absolute',
    top: '15px',
    fontSize: '12px',
    color: darkMode ? '#999' : '#666',
    fontWeight: 'normal',
    zIndex: 1,
    backgroundColor: darkMode ? '#333' : '#fff',
    padding: '0 8px'
  }),

  // 切换主题按钮样式
  themeToggleButton: (darkMode) => ({
    padding: "8px 16px",
    fontSize: "14px",
    cursor: "pointer",
    backgroundColor: darkMode ? "#fff" : "#333",
    color: darkMode ? "#333" : "#fff",
    border: "1px solid #ccc",
    borderRadius: "4px"
  }),

  // 页面容器样式
  pageContainer: {
    width: '100%',
    minHeight: '100vh',
    padding: '20px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '20px'
  },

  // 页面标题样式
  pageTitle: {
    fontSize: '24px',
    fontWeight: 'bold',
    marginBottom: '20px',
    textAlign: 'center',
    color: '#333'
  }
}; 